<template>
  <div class="gamelist">
    <h3 class="gamelist__head" v-if="title">
      <span class="gamelist__title">{{title}}</span>
      <router-link class="gamelist__more" :to="morelink" v-if="morelink">更多</router-link>
    </h3>

    <div class="gamelist__body" v-if="content">
      <div :class="direction" v-if="direction === 'row'">
        <div :class="`${direction}__content`" v-if="item === 'gray'">
          <RowGray v-for="(itm, idx) in content" :key="idx" :item="itm"/>
        </div>
        <div :class="`${direction}__content`" v-else-if="item === 'image'">
          <RowImage v-for="(itm, idx) in content" :key="idx" :item="itm"/>
        </div>
        <div :class="`${direction}__content`" v-else-if="item === 'server'">
          <RowServer v-for="(itm, idx) in content" :key="idx" :item="itm"/>
        </div>
        <div :class="`${direction}__content`" v-else>
          <Row v-for="(itm, idx) in content" :key="idx" :item="itm"/>
        </div>
      </div>
      <div :class="direction" v-else>
        <div :class="`${direction}__content`" v-if="item === 'large'">
          <ColumnLarge v-for="(itm, idx) in content" :key="idx" :item="itm"/>
        </div>
        <div :class="`${direction}__content`" v-else-if="item === 'full'">
          <Column v-for="(itm, idx) in content" :key="idx" :item="itm" full :type="type"/>
        </div>
        <div :class="`${direction}__content`" v-else>
          <Column v-for="(itm, idx) in content" :key="idx" :item="itm"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Column from './Column'
import ColumnLarge from './ColumnLarge'
import Row from './Row'
import RowImage from './RowImage'
import RowGray from './RowGray'
import RowServer from './RowServer'

export default {
  name: 'gameList',
  components: {
    Column,
    ColumnLarge,
    Row,
    RowImage,
    RowGray,
    RowServer
  },
  watch:{
    // content:{
    //   handler(val){
    //       console.log('watch',val)
    //   },
    //   immediate:true
    // }
  },
  props: {
    content: {
      type: Array
    },
    direction: {
      type: String,
      default: 'column'
    },
    item: {
      type: String
    },
    morelink: {
      type: String
    },
    title: {
      type: String
    },
    type: {
      type: String
    }
  }
}
</script>

<style scoped lang="scss">
.gamelist {
  margin-bottom: 0.2rem;

  &:last-child {
    margin-bottom: 0;
  }

  &__head {
    align-items: center;
    color: #333;
    display: flex;
    font-size: 0.16rem;
    padding: 0 0.15rem;
  }

  &__title {
    flex: 1;
    font-weight: bold;
  }

  &__more {
    color: #999;
    font-size: 0.13rem;
    padding-right: 0.12rem;
    position: relative;

    &::after {
      border: 1px solid #999;
      border-width: 0 1px 1px 0; /* no */
      content: '';
      font-size: 0;
      height: 0.07rem;
      position: absolute;
      right: 0.02rem;
      top: 0.05rem;
      transform: rotate(-45deg);
      width: 0.07rem;
    }
  }
}

.row {
  overflow-x: auto;
  padding: 0 0.15rem;

  &::-webkit-scrollbar {
    display: none;
  }

  &__content {
    margin-top: 0.15rem;
    white-space: nowrap;
  }
}
</style>
